<%@ page import="beans.Account"%>
<%@ page import="service.AccountService"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>申请差旅</title>
</head>
<body>
	<%
	AccountService accountservice = new AccountService();
	Account account = (Account) session.getAttribute("account");
	int id = account.getAno();
	%>
	<div style="width: 100%; border-bottom: 1px solid #d1d6d8;">
		<div style="margin-top: 20px; margin-left: 30px; margin-bottom: 10px;">
			<span style="font-size: 40px;">申&nbsp;请&nbsp;差&nbsp;旅</span>
		</div>
	</div>


	<form action="Staff_createTravelServlet" method="post">
		<div class="cardBox">

			<span style="margin-left: 260px;"></span> <input
				style="margin-top: 10px; margin-bottom: 30px" type="text"
				placeholder="任务名" name="idname" id="idname" />
			<div style="border-bottom: 1px solid #CCCCCC;"></div>
			<br> <span style="margin-left: 260px;"></span> <input
				type="text" placeholder="出差地" name="address" id="address" />
			<div style="border-bottom: 1px solid #CCCCCC;"></div>
			<br> <span style="margin-left: 80px;"></span> 请选择出行时间：<input
				style="margin-top: 10px; margin-bottom: 30px" type="date"
				name="startdate" id="startdate" value="" /> <span
				style="margin-left: 230px;"></span> 请选择返回时间：<input
				style="margin-top: 10px; margin-bottom: 30px" type="date"
				name="enddate" id="enddate" value="" />
			<div style="border-bottom: 1px solid #CCCCCC;"></div>




			<span style="margin-left: 260px;"></span>
			<div class="select">


				<select name="select" id="select" onchange="func()">
					<option value="no" selected disabled hidden>请选择报销方式</option>
					<option value="pereva" onclick="show()">预支款</option>
					<option value="Travelfinish">差旅结束后报销</option>
				</select>


			</div>

			<div style="border-bottom: 1px solid #CCCCCC;"></div>

			<span style="margin-left: 80px;"></span> <input
				style="margin-top: 30px; margin-bottom: 30px" type="radio"
				name="Travel" id="plane" value="飞机"> <span
				style="margin-left: 0px;">飞机</span> <span
				style="margin-left: 120px;"></span> <input
				style="margin-top: 30px; margin-bottom: 30px" type="radio"
				name="Travel" id="train" value="火车">火车 <span
				style="margin-left: 120px;"></span> <input
				style="margin-top: 30px; margin-bottom: 30px" type="radio"
				name="Travel" id="highspeedrail" value="高铁">高铁 <span
				style="margin-left: 120px;"></span> <input
				style="margin-top: 30px; margin-bottom: 30px" type="radio"
				name="Travel" id="car" value="汽车">汽车 <span
				style="margin-left: 120px;"></span> <input
				style="margin-top: 30px; margin-bottom: 30px" type="radio"
				name="Travel" id="bus" value="大巴">大巴 <br>
			<div style="border-bottom: 1px solid #CCCCCC;"></div>
			<div style="border-bottom: 1px solid #CCCCCC;"></div>

			<br> <span style="margin-left: 100px;"></span>
			<textarea style="margin-top: 30px; margin-bottom: 30px" rows="6"
				cols="20" placeholder="请输入任务详情" name="taskdetails" id="taskdetails"></textarea>
			<div style="border-bottom: 1px solid #CCCCCC;"></div>


			<br> <span style="margin-left: 200px;"></span> <input
				class="button gray" type="submit" value="确定"
				onclick="examin(<%=id%>)"> <span
				style="margin-left: 200px;"></span> <input class="button gray"
				type="reset" value="重置">
		</div>

		<div id="AddStuff" class="cardDialog"
			style="display: none; height: 200px">
			<div style="margin-top: 20px; margin-left: 0px;">

				<input type="hidden" name="idNum" id="idNum">
				<center>
					<div id="area" name="area" style="display: none">
						<input style="width: 300px;" type="text" name="amount" id="amount"
							placeholder="请输入申请额度"> <br>
						<br>
						<textarea value="" id="textarea_value" name="textarea_value"
							rows="3" cols="" placeholder="请输入申请预支款的理由" class="input"></textarea>
					</div>
				</center>
				<br />
				<br />
				<div style="margin-left: 65px;">
					<input class="button gray" type="button" value="保存"
						onclick="hide()"
						onmouseover="this.style.backgroundColor='#ececec';"
						onmouseout="this.style.backgroundColor='#f2f3f7';" /> <input
						class="button gray" type="button" value="返回" onclick="hide()"
						onmouseover="this.style.backgroundColor='#ececec';"
						onmouseout="this.style.backgroundColor='#f2f3f7';" />
				</div>

			</div>
		</div>
	</form>
</body>
</html>
<script>
function examin(id){
	document.getElementById('idNum').value=id;
	
}

function show(){
	document.getElementById('AddStuff').style.display = "";

}


function hide(){
    document.getElementById('AddStuff').style.display = "none";
}

function func(){
	
    var v = document.getElementById('select');
    var index = v.selectedIndex;
    if(index == "1"){
    	show();
        document.getElementById('area').style.display = "";
        document.getElementById('AddStuff').style.height = "300px";
    } else if(index == "2"){
    	document.getElementById('area').style.display = "none";
    	document.getElementById('AddStuff').style.display = "none";
    }
}



</script>

<style>
* {
	margin: 0px;
	border: 0px;
}

.cardBox {
	background-color: white;
	width: 85%;
	height: 100%;
	margin: 0 auto;
	margin-top: 20px;
	box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	padding-top: 30px;
	padding-bottom: 10px;
}

.button {
	width: 140px;
	line-height: 38px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
	border-radius: 5px;
	margin: 0 20px 20px 0;
	position: relative;
	overflow: hidden;
}

.button.gray {
	color: #8c96a0;
	text-shadow: 1px 1px 1px #fff;
	border: 1px solid #dce1e6;
	box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
	background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
	background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
	background: linear-gradient(top, #f2f3f7, #e4e8ec);
}

.no {
	background-color: lightgrey;
	width: 300px;
	border-style: outset;
	padding: 50px;
	margin: 30px 20px 200px 30px;
}

input[type=text] {
	text-align: center;
	width: 400px;
	height: 10px;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: 1px solid #555;
	border-radius: 4px;
	font-size: 16px;
	background-color: white;
	margin-top: 10px;
	margin-bottom: 30px
}

input[type=text]:focus {
	background-color: #f8f8f8;
}

input[type=date] {
	border: 1px solid black;
}

textarea {
	width: 80%;
	height: auto;
	padding: 12px 20px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 1px;
	background-color: #f8f8f8;
	resize: none;
}

.cardDialog {
	width: 450px;
	top: 20px;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	position: fixed;
	margin: 200px 100px 100px 300px;
	background-color: white;
	margin-top: 20px;
	margin-bottom: 40px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	padding: 5px;
	padding-top: 15px;
}

.shortselect {
	background: #fafdfe;
	height: 30px;
	width: 200px;
	line-height: 28px;
	border: 1px solid #9bc0dd;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

/*select基础设计*/
.select {
	display: inline-block;
	width: 400px;
	position: relative;
	vertical-align: left;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: 30px;
	margin-bottom: 30px;
	overflow: hidden;
	background-color: #fff;
	color: #555;
	border: 1px solid #aaa;
	text-shadow: none;
	border-radius: 4px;
	transition: box-shadow 0.25s ease;
	z-index: 2;
}
/*阴影*/
.select:hover {
	box-shadow: 0 10px 12px rgba(0, 0, 0, 0.15);
}
/*三角标设计*/
.select:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-top-color: #ccc;
	top: 12px;
	right: 10px;
	cursor: pointer;
	z-index: -2;
}
/*可点击范围*/
.select select {
	cursor: pointer;
	padding: 1px;
	width: 100%;
	border: none;
	background: transparent;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.select select:focus {
	outline: none;
}
</style>